<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    isCheck: Boolean,
    disabled: Boolean,
    backgroundColor: { type: String, default: "#fafafa" },
  },
});
</script>

<template>
  <view class="check-state" :style="{ opacity: disabled ? 0.3 : 1 }">
    <view
      class="check-state-wrapper"
      :style="{
        backgroundColor: isCheck ? 'rgba(255, 121, 0, 0.05)' : backgroundColor,
      }"
    >
      <slot />
    </view>

    <template v-if="isCheck">
      <view class="check-state-border"></view>
      <image
        class="check-state-icon"
        src="@/package/mall/static/jps-package-check.png"
      />
    </template>
  </view>
</template>

<style lang="scss">
.check-state {
  position: relative;

  .check-state-wrapper {
    border-radius: 10rpx;
  }

  .check-state-border {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 10rpx;
    border: 2rpx solid #ff7900;
  }

  .check-state-icon {
    position: absolute;
    left: 0;
    top: -12rpx;
    width: 40rpx;
    height: 24rpx;
  }
}
</style>
